<template>
  <div class="layout">
    <el-container style="height: 100vh">
      <el-aside width="200px">
        <div class="logo-container">
          <h2>微前端主应用</h2>
        </div>
        <el-menu router :default-active="activeMenu" class="el-menu-vertical" background-color="#001529"
          text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="/">
            <el-icon><i class="el-icon-s-home"></i></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="/sub-app1">
            <el-icon><i class="el-icon-menu"></i></el-icon>
            <span>子应用1</span>
          </el-menu-item>
          <el-menu-item index="/sub-app2">
            <el-icon><i class="el-icon-document"></i></el-icon>
            <span>子应用2</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="
            height: 50px;
            line-height: 50px;
            background-color: #fff;
            border-bottom: 1px solid #ddd;
          ">
          <div class="header-content">
            <h3>{{ getHeaderTitle() }}</h3>
            <!-- 显示当前环境信息（开发模式下） -->
            <div v-if="isDev" class="env-info">
              <el-tag :type="envTagType" size="small">
                {{ appType.toUpperCase() }}
              </el-tag>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view v-if="!isCurrentSubApp" />
          <div id="subapp-viewport" v-else></div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useQiankun } from '@/utils/qiankun'

const route = useRoute()

// 使用 qiankun 工具类获取环境信息
const qiankunInfo = useQiankun()
const {
  isMainApp,
  isSubApp,
  isStandalone,
  appType,
  subAppName,
  debugInfo
} = qiankunInfo

// 开发环境标识
const isDev = import.meta.env.DEV

// 环境标签类型
const envTagType = computed(() => {
  switch (appType) {
    case 'main': return 'primary'
    case 'sub': return 'success'
    case 'standalone': return 'warning'
    default: return 'info'
  }
})

const activeMenu = computed(() => {
  // 使用更精确的子应用判断逻辑
  if (route.path.startsWith('/sub-app1')) {
    return '/sub-app1'
  }
  if (route.path.startsWith('/sub-app2')) {
    return '/sub-app2'
  }
  return route.path
})

// 优化的子应用判断逻辑
const isCurrentSubApp = computed(() => {
  // 方法1: 使用 qiankun 工具类判断（更准确）
  if (isSubApp) {
    return true
  }

  // 方法2: 路径判断（作为备用方案）
  const isSubAppRoute = route.path.startsWith('/sub-app1') || route.path.startsWith('/sub-app2')

  // 方法3: 检查是否有子应用容器且当前是子应用路由
  const hasSubAppContainer = document.querySelector('#subapp-viewport') !== null

  return isSubAppRoute && (isMainApp || hasSubAppContainer)
})

const getHeaderTitle = () => {
  // 优化标题显示逻辑
  if (isSubApp && subAppName) {
    return `子应用: ${subAppName}`
  }

  switch (route.path) {
    case '/':
      return isMainApp ? '微前端主应用 - 首页' : '首页'
    case '/sub-app1':
      return '子应用1'
    case '/sub-app2':
      return '子应用2'
    default:
      if (route.path.startsWith('/sub-app1')) {
        return '子应用1'
      }
      if (route.path.startsWith('/sub-app2')) {
        return '子应用2'
      }
      return isMainApp ? '微前端主应用' : '应用'
  }
}

// 开发模式下输出调试信息
onMounted(() => {
  if (isDev) {
    console.log('[Layout] qiankun 环境信息:', {
      isMainApp,
      isSubApp,
      isStandalone,
      appType,
      subAppName,
      currentRoute: route.path,
      isCurrentSubApp: isCurrentSubApp.value,
      debugInfo
    })
  }
})
</script>

<style scoped>
.layout {
  width: 100%;
  height: 100%;
}

.logo-container {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  background-color: #001529;
}

.el-menu-vertical {
  border-right: none;
  height: calc(100% - 60px);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.env-info {
  margin-left: 10px;
}

.el-main {
  padding: 0;
  height: calc(100vh - 50px);
  overflow: auto;
}

#subapp-viewport {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}
</style>
